﻿<!DOCTYPE html>
<html lang="en">

<head>

    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>作业(2)</title>
    <style>
        .wrap {
            width: 700px;
            /* height: 100px; */
            background-color: #f0f0f0;
            margin: 0 auto;
        }

        .wrap .redbox,
        .wrap .bluebox {
            float: left;
        }

        .wrap .redbox {
            width: 600px
        }

        .wrap .redbox ul,
        .wrap .bluebox ol {
            padding: 0;
            margin: 0;
            list-style: none;
        }

        .wrap .redbox li,
        .wrap .bluebox li {
            width: 80px;
            height: 80px;
            border-radius: 50%;
            color: #fff;
            text-align: center;
            line-height: 80px;
            margin: 10px;
            float: left;
        }

        .wrap .redbox li {
            background-color: #f00;
        }

        .wrap .bluebox {
            width: 100px;
        }

        .wrap .bluebox li {
            background-color: #00f;
        }

        .contrl {
            width: 700px;
            margin: 0 auto;
        }

        .contrl button {
            padding: 15px 30px;
            cursor: pointer;
            outline: none;
            border: 1px solid skyblue;
        }

        .contrl button:active {
            background-color: deepskyblue;
            color: white;
        }

        .clearfix::after {
            content: "";
            clear: both;
            display: block;
        }
    </style>
</head>

<body>
    <div class="contrl">
        <button class="randombtn">机选一注</button>
    </div>
    <!--
        <div class="wrap clearfix">
            <div class="redbox">
                <ul>
                    <li></li>
                    <li></li>
                    <li></li>
                    <li></li>
                    <li></li>
                    <li></li>
                </ul>
            </div>
            <div class="bluebox">
                <ol>
                    <li></li>
                </ol>
            </div>
        </div> 
    -->

    <script>
        // 需求
        // 刷新页面产生一注随机彩票
        // 彩票规则
        // 红色数字： 1 ~ 33 
        // 蓝色数字:  1 ~ 16
        // 6个随机数字不重复的红色数字和1一个随机蓝色数字可以组成一注彩票

        // 思路：
        // 定义红色数字数组和蓝色数字数字分别记录对应的数据
        // 然后从数组中根据随机索引值获取数字
        // 组成一注彩票，渲染在页面对应的标签
        // 基本步骤:
        // 1、记录相关数据
        // 2、书写程序的处理逻辑

        // 编码实现:
        // 1、记录相关数据
        // 页面的元素
        // var redBox = document.getElementsByClassName("redbox")[0];
        // var redElements = redBox.getElementsByTagName("li");
        // var blueBox = document.getElementsByClassName("bluebox")[0];
        // var blueElement = blueBox.getElementsByTagName("li")[0];
        var btnRandom = document.getElementsByClassName("randombtn")[0];
        // 2、书写程序的处理逻辑
        // 定义函数返回随机索引值
        function randomIndex(v1) {
            // 返回指定范围的随机数
            return Math.floor(Math.random() * v1);
        }
        // 定义函数 返回6个红色不重复的数字和1个蓝色随机数字
        function randomData() {
            var redArray = [];
            var blueArray = [];
            for (var num = 1; num < 34; num++) {
                // 红色数字数组
                redArray.push(num);
                // 判断数字范围
                if (num < 17) {
                    // 蓝色数字的数组
                    blueArray.push(num);
                }
            }
            // 定义空数组 记录组成彩票的所有数据
            var data = [];
            // 循环产生6个红色随机不重复的数字
            for (var i = 0; i < 6; i++) {
                // 红色数组的随机索引值
                var index = randomIndex(redArray.length);
                // 红色数字
                var redNumber = redArray.splice(index, 1)[0];
                // 添加到data数组中 红色数字数据
                // {number:redNumber,color:"red"} 对象
                data.push({ number: redNumber, color: "red" });
            }
            // 产生蓝色随机数字
            var blueNumber = blueArray[randomIndex(blueArray.length)];
            //添加蓝色数字数据
            data.push({ number: blueNumber, color: "blue" });
            // 返回整理完毕的数据 data
            return data;
        }
        //测试
        // var res =  randomData();
        // console.log(res);
        // 定义函数 渲染数据
        function renderData(data){
            // 判断data是否有值
            if(data.length == 0 || data == undefined){
                // 终止代码
                return ;
            }
            // 创建容器标签 
            var wrapElement = document.createElement("div");
            // 设置类名
            wrapElement.className = "wrap clearfix";
            // 字符的拼接
            var str = '';
                str += '<div class="redbox">'
                str += '    <ul>'
                str += '        <li>'+data[0].number+'</li>'
                str += '        <li>'+data[1].number+'</li>'
                str += '        <li>'+data[2].number+'</li>'
                str += '        <li>'+data[3].number+'</li>'
                str += '        <li>'+data[4].number+'</li>'
                str += '        <li>'+data[5].number+'</li>'
                str += '    </ul>'
                str += '</div>'
                str += '<div class="bluebox">'
                str += '    <ol>'
                str += '        <li>'+data[6].number+'</li>'
                str += '    </ol>'
                str += '</div>'
            // 设置文本
            wrapElement.innerHTML = str;
            // 往body标签添加元素
            document.body.appendChild(wrapElement);
        }
        // 测试
        // renderData(res);
        // 3、事件绑定
        btnRandom.onclick = function(){
            // 书写程序的处理逻辑
            // 获取随机彩票数据
            var res =  randomData();
            // 渲染彩票数据
            renderData(res);
        }
    </script>

</body>

</html>